<html lang="zh-cn">
<head>
{% include "tdm_include_head_template.html" %}
<link href="/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
</head>

<body class=" theme-blue">
{% include "tdm_include_navbar_template.html" %}

<div class="container">
  <br/>
  {% include "tdm_include_error_template.html" %}
  {% include "tdm_include_report_navbar_template.html" %}

  <div class="form-context">
  <div class="row">
    <div class="col-lg-3 col-sm-12">
      <form name="report_form" class="form-horizontal" action="/tdm/report/" method="post">
      <div class="form-group">
        <label for="city_select" class="col-sm-4 control-label">城市</label>
        <div class="col-sm-8">
          <select name="city_select" id="city_select" class="form-control">
            {% for city in city_all %}
            <option value="{{city.name}}" {% ifequal city.name view_city.name %}selected="selected"{% endifequal %}>{{city.name}}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="form-group">
        <label for="start_date" class="col-sm-4 control-label">开始日期</label>
        <div class="col-sm-8">
          <div data-link-format="yyyy-mm-dd" data-link-field="dtp_input2" data-date-format="yyyy-mm-dd" class="input-group date form_date">
            <input id="start_date" name="start_date" type="text" readonly="" value="" size="16" class="form-control">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
          <input type="hidden" value="" id="dtp_input2">
        </div>
      </div>
      <div class="form-group">
        <label for="end_date" class="col-sm-4 control-label">结束日期</label>
        <div class="col-sm-8">
          <div data-link-format="yyyy-mm-dd" data-link-field="dtp_input2" data-date-format="yyyy-mm-dd" class="input-group date form_date">
            <input id="end_date" name="end_date" type="text" readonly="" value="" size="16" class="form-control">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          </div>
          <input type="hidden" value="" id="dtp_input2">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-8 col-sm-offset-4">
          <button id="op" name="op" value="report" type="button" class="btn btn-primary btn-block">提交</button>
        </div>
      </div>
    </div>
    <div class="col-lg-9 col-sm-12" id="report_main">
    </div>
  </div>
  </form>
  </div>

  {% include "tdm_include_footer_template.html" %}
</div>

<script type="text/javascript" src="/static/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="/static/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
function refresh_ctm_error_report(city, start_date, end_date) {
  var venue_report_view = '<div id="city_report" style="min-width:600px;height:500px"></div>';
  var url = '/tdm/json/report/credit_card/'+city+'/'+start_date+'/'+end_date+'/';
  var city_venue_list = [];
  var city_attend_data = [];
  var city_noattend_data = [];
  $.getJSON(url, function (data) {
    venue_flot_list = data;
    $.each(data, function(i, vn_rep) {
      console.log(vn_rep);
      city_venue_list.push(vn_rep.vn_name);
      city_attend_data.push(vn_rep.vn_attend);
      city_noattend_data.push(vn_rep.vn_toattend-vn_rep.vn_attend);
    });
    //console.log(venue_report_view);
    //console.log(city_pie_data);
    $("#report_main").html(venue_report_view);
    column_percent_show('#city_report', city_venue_list, [{name:'未考勤',data:city_noattend_data},{name:'已考勤',data:city_attend_data}]);
    //console.log(venue_flot_list);
    //pie_show('#city_report', city, [{name:'刷卡率', data:[['已考勤', city_pie_data[0]], ['未考勤', city_pie_data[1]-city_pie_data[0]]]}]);
    //$.each(venue_flot_list, function(i, d) {
    //  //console.log($('#'+d.vn_id));
    //  pie_data = [{name:'刷卡率', data:[['已考勤', d.vn_attend], ['未考勤', d.vn_toattend-d.vn_attend]]}];
    //  pie_show('#'+d.vn_id, d.vn_name, pie_data);
    //});
  });
}
$(function() {
  sidebar_nav_clone();
  $('.form_date').datetimepicker({
    language:  'en',
    autoclose: 1,
    startView: 2,
    minView: 2,
    todayHighlight: true,
    language: "zh-CN",
    initialDate: new Date()
  });
  $("button#op").click(function() {
    var city_select = $("#city_select").val();
    var start_date = $("#start_date").val();
    var end_date = $("#end_date").val();
    if (!city_select) {
      alert("请选择一个城市");
      return false;
    }
    if (!start_date) {
      alert("请选择开始日期");
      return false;
    }
    if (!end_date) {
      alert("请选择结束日期");
      return false;
    }
    refresh_ctm_error_report(city_select, start_date, end_date);
  });
});
</script>
</body>
</html>
